
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>wxGlade Overview and Quick Start &#8212; wxGlade 1.1.0b1 documentation</title>
    <link rel="stylesheet" href="_static/classic.css" type="text/css" />
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/css/custom.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    './',
        VERSION:     '1.1.0b1',
        COLLAPSE_INDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true,
        SOURCELINK_SUFFIX: '.txt'
      };
    </script>
    <script type="text/javascript" src="_static/jquery.js"></script>
    <script type="text/javascript" src="_static/underscore.js"></script>
    <script type="text/javascript" src="_static/doctools.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="wx Basics" href="wxbasics.html" />
    <link rel="prev" title="Welcome to wxGlade’s documentation!" href="index.html" /> 
  </head>
  <body>
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             accesskey="I">index</a></li>
        <li class="right" >
          <a href="wxbasics.html" title="wx Basics"
             accesskey="N">next</a> |</li>
        <li class="right" >
          <a href="index.html" title="Welcome to wxGlade’s documentation!"
             accesskey="P">previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.0b1 documentation</a> &#187;</li> 
      </ul>
    </div>  

    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body" role="main">
            
  <div class="section" id="wxglade-overview-and-quick-start">
<h1>wxGlade Overview and Quick Start<a class="headerlink" href="#wxglade-overview-and-quick-start" title="Permalink to this headline">¶</a></h1>
<div class="section" id="installing-wxglade">
<h2>Installing wxGlade<a class="headerlink" href="#installing-wxglade" title="Permalink to this headline">¶</a></h2>
<p>For some Linux flavors there are system packages for wxGlade.</p>
<p>Other than that, there is no real installation.
Just download the latest released version as zip archive from <a class="reference external" href="https://sourceforge.net/projects/wxglade/files/wxglade/">https://sourceforge.net/projects/wxglade/files/wxglade/</a>
or from the git release page at <a class="reference external" href="https://github.com/wxGlade/wxGlade/releases">https://github.com/wxGlade/wxGlade/releases</a></p>
<p>Unpack the archive to a known location and maybe add it to the path.</p>
<p>If you are familiar with git, you may instead just clone the repository from <a class="reference external" href="https://github.com/wxGlade/wxGlade.git">https://github.com/wxGlade/wxGlade.git</a></p>
<p>The master branch should be stable enough for your work and I appreciate bug reports.</p>
<dl class="docutils">
<dt><strong>Supported Python and wxPython Versions:</strong></dt>
<dd><ul class="first last simple">
<li>The <em>Classic</em> wxPython versions 2.8 and 3.0 are supported as well as wxPython 4 <em>Phoenix</em> running under Python 3</li>
<li>Phoenix plus Python 2 will probably also work, but this is not tested at all. wxPython 2.8 is generally less tested than the more recent versions.</li>
<li>When running Python 3 + Phoenix or Python 2 + Classic, the generated Python code will not be compatible to the other version.</li>
</ul>
</dd>
</dl>
<p><strong>Other Prerequisites:</strong>
On Windows, the win32 extensions should be installed: <a class="reference external" href="https://pypi.org/project/pywin32/">https://pypi.org/project/pywin32/</a>
If they are available, wxGlade will register for .wxg files such that you can open them via double-click.</p>
</div>
<div class="section" id="running-wxglade">
<h2>Running wxGlade<a class="headerlink" href="#running-wxglade" title="Permalink to this headline">¶</a></h2>
<p>To start the program, change directory to the installation directory and enter <code class="code docutils literal"><span class="pre">python3</span> <span class="pre">wxglade.py</span></code>
or <code class="code docutils literal"><span class="pre">python</span> <span class="pre">wxglade.py</span></code> in your shell or use whatever is required to start a python application on your platform.</p>
<p>You may want to add a desktop shortcut to run the <code class="docutils literal"><span class="pre">wxGlade.py</span></code> file (or the <code class="docutils literal"><span class="pre">wxGlade.pyw</span></code> file).</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p>For the best user experience, run wxGlade with your target wxPython revision (e.g. 2.8, 3.0, 4.0, 4.1).</p>
<p class="last">If you use a different revision, the <em>Design</em> and <em>Preview</em> window might not look identical to your final
program, as some styles are not supported under all revisions.</p>
</div>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p>If you want to build a GUI for wxPython <em>Classic</em> (&lt;=3.0) or <em>Phoenix</em> (&gt;=4.0):
Start wxGlade in your target version - if it runs under <em>Phoenix</em>, it will create <em>Phoenix</em> code.</p>
<p class="last">The <code class="docutils literal"><span class="pre">.wxg</span></code> file format is not affected by this.
So you may use a single <code class="docutils literal"><span class="pre">.wxg</span></code> file to generate code for both <em>Classic</em> and <em>Phoenix</em>.
The generated code should always run under both Python 2.7 and Python 3.</p>
</div>
</div>
<div class="section" id="accessibility">
<h2>Accessibility<a class="headerlink" href="#accessibility" title="Permalink to this headline">¶</a></h2>
<p>wxGlade attempts to be accessible not only via mouse and screen but also via keyboard and screen readers.</p>
<p>Keep in mind for your own applications that accessibility and usability go hand in hand.
Keep your user intefaces simple and straightforward.</p>
<p>If you are using a screen reader like NVDA or JAWS:</p>
<p>Go to “Edit -&gt; Preferences… -&gt; Accessibility” to enable better compatibility.</p>
<p>If you observe problems, please provide feedback via the mailing list or the Github issue tracker.</p>
</div>
<div class="section" id="program-windows">
<h2>Program Windows<a class="headerlink" href="#program-windows" title="Permalink to this headline">¶</a></h2>
<p>wxGlade consists of three windows. The main window is split into three panels. The panels are separated by
draggable sashes. Also, the “Windows” menu allows to re-arrange the sections by switching between three
different layouts.</p>
<dl class="docutils">
<dt>(click on one of the images to see it full size; the screenshots are a bit out of date as previously</dt>
<dd>Palette, Tree and Properties were three separate windows)</dd>
</dl>
<table border="1" class="colwidths-given docutils align-center">
<colgroup>
<col width="20%" />
<col width="80%" />
</colgroup>
<tbody valign="top">
<tr class="row-odd"><td><a class="reference internal" href="_images/wPalette.png"><img alt="Press F4 to focus the Palette panel" class="align-middle" src="_images/wPalette.png" style="width: 200px;" /></a></td>
<td>Main window <strong>Palette</strong> panel: <br/> <br/>
There is an icon for each window and control type that can be added to a project.</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="_images/wTree.png"><img alt="Press F2 to focus the Tree view control" class="align-middle" src="_images/wTree.png" style="width: 200px;" /></a></td>
<td>Main window <strong>Tree</strong> view control: <br/> <br/>
This tree visualizes and allows editing the structure of the project with it’s
application, windows, sizers and controls. <br/>
On selection of an item, it’s properties will be shown in the <em>Properties</em> notebook.
<br/> <br/>
Press <code class="kbd docutils literal"><span class="pre">F2</span></code> to focus the <strong>Tree</strong> view control.</td>
</tr>
<tr class="row-odd"><td><a class="reference internal" href="_images/wProperties.png"><img alt="Press F3 to focus the Properties notebook; see reference section for more shortcuts" class="align-middle" src="_images/wProperties.png" style="width: 200px;" /></a></td>
<td>Main window <strong>Properties</strong> notebook: <br/> <br/>
This lets you display and edit the properties of applications, windows and controls. <br/>
To edit an item, select it in the <em>Tree</em> or <em>Design</em> window.
<br/> <br/>
Press <code class="kbd docutils literal"><span class="pre">F3</span></code> to focus the <strong>Properties</strong> notebook; see reference section for more shortcuts.</td>
</tr>
<tr class="row-even"><td><a class="reference internal" href="_images/wDesign.png"><img alt="Press F6 to show the Design window" class="align-middle" src="_images/wDesign.png" style="width: 200px;" /></a></td>
<td><strong>Design</strong> window: <br/> <br/>
This one visualizes the design of the window. It is not 100% identical to the final window. <br/>
To open this window, double-click a window’s icon in the <em>Tree</em> window.
<br/> <br/>
Press <code class="kbd docutils literal"><span class="pre">F6</span></code> to show the <strong>Design</strong> window.</td>
</tr>
<tr class="row-odd"><td>&#160;</td>
<td><strong>Preview</strong> window <br/> <br/>
A preview of the current window. <br/>
It should look 100% identical to the window when it is used in the application.
<br/> <br/>
Press <code class="kbd docutils literal"><span class="pre">F5</span></code> for the <strong>Preview</strong> window.</td>
</tr>
</tbody>
</table>
<div class="admonition seealso">
<p class="first admonition-title">See also</p>
<p class="last"><a class="reference internal" href="reference.html"><span class="doc">Reference: Keyboard and Mouse Actions</span></a> <strong>for keyboard shortcuts and mouse actions.</strong></p>
</div>
</div>
<div class="section" id="examples">
<h2>Examples<a class="headerlink" href="#examples" title="Permalink to this headline">¶</a></h2>
<p>Before doing anything else, you may want to open an example file showing most of the supported controls:</p>
<ul class="simple">
<li>for wxPython 3.0 and Phoenix: <code class="file docutils literal"><span class="pre">examples/AllWidgets/AllWidgets_30.wxg</span></code></li>
<li>for wxPython 2.8: <code class="file docutils literal"><span class="pre">examples/AllWidgets/AllWidgets_28.wxg</span></code></li>
</ul>
<p>Each example file includes a frame with most of the supported widgets and also a menu bar, a tool bar and a status bar.</p>
<dl class="docutils">
<dt><strong>Required steps:</strong></dt>
<dd><ul class="first last simple">
<li>open the file by dragging it to the main window or by selecting the menu item File-&gt;Open</li>
<li>double-click “All_Widgets” in the <em>Tree</em> view to open the <em>Design</em> window and have a look around</li>
<li>create Python source code:<ul>
<li>press <code class="kbd docutils literal"><span class="pre">Ctrl-G</span></code> or</li>
<li>select the toplevel object “Application” and hit the button “Generate Source” in the <em>Properties</em> window</li>
</ul>
</li>
<li>press <code class="kbd docutils literal"><span class="pre">F5</span></code> to create a preview</li>
</ul>
</dd>
</dl>
<p><strong>More examples:</strong></p>
<p>There are additional examples in <code class="docutils literal"><span class="pre">wxglade/examples</span></code> showing how to use the CustomWidget to integrate some widgets that are not directly supported by wxGlade. The wxGlade design window will only display a placeholder for these.</p>
<blockquote>
<div><ul class="simple">
<li><code class="docutils literal"><span class="pre">dialog</span></code>: create a dialog; show it on a button press or menu item selection; retrieve the result</li>
<li><code class="docutils literal"><span class="pre">html</span></code>: use <code class="code docutils literal"><span class="pre">wx.html.HtmlWindow</span></code> to display simple HTML pages</li>
<li><code class="docutils literal"><span class="pre">html2</span></code>: use <code class="code docutils literal"><span class="pre">wx.html2.WebView</span></code> to display HTML with Javascript and CSS (not available on wxPython 2.8)</li>
<li><code class="docutils literal"><span class="pre">lib_plot</span></code>: use <code class="code docutils literal"><span class="pre">wx.lib.plot.PlotCanvas</span></code> for plotting</li>
<li><code class="docutils literal"><span class="pre">matplotlib</span></code>: use a Matplotlib canvas for plotting, quick and dirty version</li>
<li><code class="docutils literal"><span class="pre">matplotlib2</span></code>: use a Matplotlib canvas for plotting, better structured</li>
<li><code class="docutils literal"><span class="pre">matplotlib3</span></code>: full Matplotlib embedding example</li>
<li><code class="docutils literal"><span class="pre">SpeedMeter</span></code>: demonstrate <code class="code docutils literal"><span class="pre">wx.lib.agw.speedmeter.SpeedMeter</span></code></li>
<li><code class="docutils literal"><span class="pre">py_shell</span></code>: show how to embed a Python shell <code class="code docutils literal"><span class="pre">wx.py.shell.Shell</span></code></li>
</ul>
</div></blockquote>
<p>Some of these are explained in <a class="reference internal" href="custom_widgets.html"><span class="doc">Custom Widget</span></a>, some have <cite>Readme.txt</cite> files.</p>
</div>
</div>


          </div>
        </div>
      </div>
      <div class="sphinxsidebar" role="navigation" aria-label="main navigation">
        <div class="sphinxsidebarwrapper">
            <p class="logo"><a href="index.html">
              <img class="logo" src="_static/wxglade.png" alt="Logo"/>
            </a></p>
  <h3><a href="index.html">Table Of Contents</a></h3>
  <ul>
<li><a class="reference internal" href="#">wxGlade Overview and Quick Start</a><ul>
<li><a class="reference internal" href="#installing-wxglade">Installing wxGlade</a></li>
<li><a class="reference internal" href="#running-wxglade">Running wxGlade</a></li>
<li><a class="reference internal" href="#accessibility">Accessibility</a></li>
<li><a class="reference internal" href="#program-windows">Program Windows</a></li>
<li><a class="reference internal" href="#examples">Examples</a></li>
</ul>
</li>
</ul>

  <h4>Previous topic</h4>
  <p class="topless"><a href="index.html"
                        title="previous chapter"> Welcome to wxGlade’s documentation!</a></p>
  <h4>Next topic</h4>
  <p class="topless"><a href="wxbasics.html"
                        title="next chapter">wx Basics</a></p>
  <div role="note" aria-label="source link">
    <h3>This Page</h3>
    <ul class="this-page-menu">
      <li><a href="_sources/intro.rst.txt"
            rel="nofollow">Show Source</a></li>
    </ul>
   </div>
<div id="searchbox" style="display: none" role="search">
  <h3>Quick search</h3>
    <form class="search" action="search.html" method="get">
      <div><input type="text" name="q" /></div>
      <div><input type="submit" value="Go" /></div>
      <input type="hidden" name="check_keywords" value="yes" />
      <input type="hidden" name="area" value="default" />
    </form>
</div>
<script type="text/javascript">$('#searchbox').show(0);</script>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related" role="navigation" aria-label="related navigation">
      <h3>Navigation</h3>
      <ul>
        <li class="right" style="margin-right: 10px">
          <a href="genindex.html" title="General Index"
             >index</a></li>
        <li class="right" >
          <a href="wxbasics.html" title="wx Basics"
             >next</a> |</li>
        <li class="right" >
          <a href="index.html" title="Welcome to wxGlade’s documentation!"
             >previous</a> |</li>
        <li class="nav-item nav-item-0"><a href="index.html">wxGlade 1.1.0b1 documentation</a> &#187;</li> 
      </ul>
    </div>
    <div class="footer" role="contentinfo">
        &#169; Copyright 2017-2020, Dietmar Schwertberger.
      Created using <a href="http://sphinx-doc.org/">Sphinx</a> 1.6.4.
    </div>
  </body>
</html>